/** * @Auther Jennifer * @Fun 公共组件->confirm组件(删除、二次确认弹窗) * @data
2020/07/09 */
<template>
  <div>
    <Button
      @click="instance()"
      :type="buttonProps !== 'icon' ? buttonProps : 'text'"
      size="small"
      v-if="this.$props.isVisble == true && !delModal"
    >
      <!-- 如果父组件 customType属性设置为type代表需要显示icon -->
      <Icon type="ios-trash-outline" v-if="buttonProps === 'icon'"/>
      <!-- 如果父组件 customType属性设置为img代表需要显示图片 -->
      <span v-else-if="this.$props.isShow"></span>
      <span v-else> 删除</span>
    </Button>

    <!--  删除弹窗  -->
    <Modal v-model="showDelModal" width="400" class="delModal" v-if="delModal">
      <div slot="header">
        <p class="modals">{{ title }}</p>
      </div>
      <div class="font14 color333 pt10 pb80 tc">
        {{ content }}
      </div>
      <div slot="footer" class="flex flex-x-end">
        <Button @click="showDelModal = false" class="width65 mr12">取消</Button>
        <Button @click="okBtn" :loading="delLoading" type="primary" class="width65">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  props: {
    content: String, // 弹窗主体内容
    buttonType: String, // 触发按钮样式
    custom: String, // 自定义弹窗主体内容图标
    visible: String, // 弹窗显隐藏
    isVisble: Boolean,
    delModal: {  // 是否为删除弹窗
      type: Boolean,
      default: false
    },
    title: String,  // 弹窗标题
    delLoading: {  // 按钮loading
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      buttonProps: '',
      showDelModal: false,
    }
  },
  created() {
    if (this.$props.buttonType === 'primary') {
      this.buttonProps = 'primary'
    } else if (this.$props.buttonType === 'icon') {
      this.buttonProps = 'icon'
    } else if (this.$props.buttonType === 'text') {
      this.buttonProps = 'text'
    }
  },
  methods: {
    instance(val) {
      const content = this.content
      if (this.delModal) {
        // 删除弹窗
        this.showDelModal = true;
        this.delData = val;
      } else {
        if (this.visible !== 'false') {
          this.$Modal.confirm({
            render: h => {
              return h(
                'div',
                {
                  style: {
                    display: 'flex',
                    alignItems: 'center',
                    flexDirection: 'column'
                  }
                },
                [
                  h('div', {
                    class: 'alertIcon'
                  }),
                  h('div', {
                    style: {
                      textAlign: 'center',
                      marginTop: '20px'
                    },
                    domProps: {
                      innerHTML: content
                    }
                  })
                ]
              )
            },
            onOk: () => {
              this.$emit('modalConfirmTrue', val)
            }
          })
        } else {
          this.$emit('onClick')
        }
      }
    },
    okBtn() {
      this.$emit('modalConfirmTrue', this.delData);
    },
  }
}
</script>
<style lang="less">
.alertIcon {
  width: 70px;
  height: 70px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('../assets/page-icons/icon-page-del.png');
}
</style>
<style lang="less" scoped>

.delModal {
  /deep/ .ivu-modal-header {
    padding: 0;
  }

  .modals {
    font-size: 16px;
    height: auto;
    border-bottom: 1px solid #EEEEEE;
    padding: 16px 24px;
    font-weight: 500;
    color: #333333;
  }

  /deep/ .ivu-modal-body {
    padding: 20px;
  }

  /deep/ .ivu-form .ivu-form-item-label {
    color: #333;
    font-size: 14px;
  }

  /deep/ .ivu-input {
    font-size: 14px;
  }

  /deep/ .ivu-modal-footer {
    border-top: 1px solid #EEEEEE;
    padding: 16px 20px;
  }
}
</style>
